<template>
  <div class="login">
    <van-nav-bar
      title="登录"
      right-text="注册"
      left-arrow
      @click-left="onClickLeft"
      @click-right="goReg"
    />
    <div class="form-box">
      <van-form @submit="login">
        <van-cell-group inset>
          <van-field
            v-model="username"
            name="用户名"
            placeholder="用户名"
            :rules="[
              { required: true, message: '请填写用户名' },
              {
                pattern: /[A-Za-z1-9\u4e00-\u9fa5]{1,10}/,
                message: '支持中英文数字组合',
              },
            ]"
          />
          <van-field
            v-model="password"
            type="password"
            name="密码"
            placeholder="密码"
            :rules="[
              { required: true, message: '请填写密码' },
              {
                pattern: /^[A-Za-z]\w{5,15}$/,
                message: '支持数字字母下划线组合且须以字母开头',
              },
            ]"
          />
        </van-cell-group>
        <div class="tips-item">
          <p>温馨提示:未注册的账号，请先去注册</p>
        </div>
        <div class="btn-box">
          <button class="btn">登录</button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
import { showToast } from "vant";

export default defineComponent({
  nme: "Login",
  setup() {
    let router: any = useRouter();
    // 返回上一页
    const onClickLeft = () => history.back();
    // 表单信息
    const username = ref("");
    const password = ref("");
    //去注册
    let goReg: () => void = (): void => {
      router.push({
        name: "Reg",
      });
    };
    let login: () => void = (): void => {
      let userData: any = localStorage.getItem("user");
      if (userData) {
        userData = JSON.parse(userData);
      } else {
        userData = [];
      }
      if (userData.length <= 0) {
        showToast("账号不存在,请先去注册");
      }
      for (let i = 0; i < userData.length; i++) {
        if (userData[i].name === username.value) {
          // console.log("当前手机号存在, 则进行登录");
          //验证密码
          if (userData[i].password === password.value) {
            showToast("登录成功");
            setTimeout(() => {
              router.push({
                name: "Home",
              });
            }, 2000);
            sessionStorage.clear();
            // 设置临时账号数据
            sessionStorage.setItem("user", JSON.stringify(userData[i]));
            // console.log(sessionStorage.getItem("user"));
          } else {
            showToast("账号/密码错误,请重新输入");
          }
          break;
        }
      }
    };
    // 钩子函数
    onMounted(() => {});

    return {
      username,
      password,

      // 方法
      onClickLeft,
      goReg,
      login,
    };
  },
});
</script>
<style lang="scss" scoped>
.auto-img {
  display: block;
  width: 100%;
}
.tips-item {
  padding: 10px 20px 0;
  text-align: center;
  p {
    margin: 2px 0;
  }
}
.code {
  display: flex;
  align-items: center;
  .code-img {
    width: 80px;
    height: 40px;
    margin-right: 4px;
  }
  .code-text {
    span {
      display: block;
      font-size: 12px;
    }
    .text-btn {
      color: #3190e8;
    }
  }
}
.form-box {
  margin-top: 20px;
  height: 677px;
  background-color: #eee;
  padding: 10px 0;
  box-sizing: border-box;
}

::v-deep .van-nav-bar__content {
  background-color: #3190e8;
}

::v-deep .van-nav-bar__title {
  color: #ffffff;
  font-size: 20px;
}

::v-deep .van-nav-bar .van-icon {
  color: #ffffff;
  font-size: 22px;
}

::v-deep .van-hairline--bottom::after {
  border-bottom-width: 0;
}
::v-deep .van-nav-bar__text {
  color: #ffffff;
  font-size: 16px;
}
.btn-box {
  margin: 5px 80px;
  .btn {
    width: 200px;
    height: 40px;
    font-size: 16px;
    color: #ffffff;
    background-color: #3190e8;
    border: 0;
  }
}
</style>